<template>
  <div
    class="m-list"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="finish"
    infinite-scroll-distance="16"
  >
    <div
      class="m-item backfff"
      v-for="item in dataList"
      :key="item.token"
      style="padding-bottom:8px;"
    >
      <div class="banner" v-if="item.cover">
        <img v-lazy="apihost + item.cover" alt />
      </div>
      <div class="m-item-top flex flex-ac">
        <div class="tag">保</div>
        <div class="name">{{ item.title }}</div>
      </div>
      <div class="m-item-middle flex flex-js" style="margin-top:8px;">
        <div class="flex flex-col flex-ac flex-ac">
          <div style="margin-bottom:6px;">
            <span class="num">{{ item.rate }}</span>
            <span>%</span>
          </div>
          <div>日化收益</div>
        </div>

        <div class="flex flex-col flex-ac flex-ac">
          <div style="margin-bottom:6px;">
            <span class="num">
              {{
              item.profitn
              }}
            </span>
            <span>元</span>
          </div>
          <div>{{item.tname}}</div>
        </div>
        <div class="flex flex-col flex-ac flex-ac">
          <div style="margin-bottom:6px;">
            <span class="num">{{ item.day }}</span>
            <span>天</span>
          </div>
          <div>项目期限</div>
        </div>
        <div class="flex flex-col flex-ac flex-ac">
          <div style="margin-bottom:6px;">
            <span>￥</span>
            <span class="num">{{ item.price }}</span>
            <span>元</span>
          </div>
          <div>起购金额</div>
        </div>
      </div>
      <div class="rawrd" style="margin-top:4px;" v-if="item.activity_status=='on'">
        <img v-lazy="rward" />
        <p>投资立返{{item.bonus}}元</p>
      </div>
      <div class="m-buy flex flex-ac flex-js" style="margin-top:4px;">
        <div class="total-price">项目规模：{{ item.count }}</div>
        <router-link
          :to="{
            name: 'productDetails',
            query: { token: item.token || '', title: item.title }
          }"
        >
          <div class="buy">立即购买</div>
        </router-link>
      </div>
      <div class="m-progress flex flex-ac flex-js" style="margin-top:4px;">
        <div>项目进度：</div>
        <van-progress class="progress" :percentage="item.progress" :bar-height="5"></van-progress>
        <!-- <div style="font-size:12px;">{{ item.progress }}%</div> -->
      </div>
      <div class="m-buy flex flex-ac flex-js" style="margin-top:4px;">
        <!-- <div class="total-price">项目手，：{{ item.count }}</div> -->
        <div class="total-price">项目说明：{{ item.desc }},到期还本</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHomeListApi } from "@/api";
import rward from "@/assets/imgs/rward.png";
import { API_HOST } from "@/store/mutation-types";
export default {
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.apihost = this.$ls.get(API_HOST);
    if (!this.apihost) {
      this.$store.dispatch("GET_CONF").then(res => {
        this.apihost = res.data.apihost;
      });
    }
  },
  methods: {
    async onRefresh() {
      this.finish = false;
      this.page = 1;
      this.dataList = [];
      await this.loadMore();
      this.$emit("ok");
    },
    loadMore() {
      this.finish = true;
      return getHomeListApi({ page: this.page, pagesize: 5 }).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.dataList = [...this.dataList, ...res.data];
          }
          if (res.data.length < 15) {
            this.finish = true;
            return;
          }
          setTimeout(() => {
            this.finish = false;
            this.page++;
          }, 500);
        }
      });
    }
  },
  beforeDestroy() {
    this.finish = false;
    this.page = 1;
  },

  data() {
    return {
      apihost:"",
      rward,
      dataList: [],
      finish: false,
      page: 1
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/index.less";
@import "~styles/variable.less";
.m-list {
  .banner {
    .fs(0);
    img {
      width: 100%;
      .pt(15);
    }
  }
  .m-item {
    .padding(0, 30);
    .mb(20);
    .m-item-top {
      .padding(15, 0);
      .bb(1, #eee);
      .tag {
        .w(90);
        .h(90);
        .lh(90);
        .tc();
        margin-right: 0.4rem;
        .b-radius(100);
        background: #54a500;
        color: #fff;
        .fs(42);
      }
      .name {
        .fs(36);
      }
    }
    .m-item-middle {
      .padding(20, 0);
      font-size: 16px;
      .num {
        color: #dc4c43;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .m-buy {
      .pt(15);
      .total-price {
        font-size: 16px;
      }
      .buy {
        .w(180);
        .h(60);
        .lh(60);
        font-size: 14px;
        .tc();
        .b-radius(10);
        color: #fff;
        background-color: #3485ff;
      }
    }
    .m-progress {
      .padding(15, 0);
      color: #666666c9;
      font-size: 16px;
      .progress {
        .w(400);
      }
    }
  }
}
/deep/ .van-progress__pivot {
  font-size: 8px;
}

.rawrd {
  width: 95%;
  border: 1px solid rgb(183, 207, 254);
  border-radius: 40px;
  background: rgba(52, 133, 255, 0.3);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 28px;
    margin-right: 12px;
  }
  color: rgb(52, 133, 255, 1);
}
</style>
